<template>
    <div>
        <!-- 
            如下三种指令只有符合条件才创建DOM元素，如果不符合条件则删除DOM元素
            这种条件渲染存在着如果频繁切换，就要频繁的去创建DOM和删除DOM,
            如果存在的频繁的切换，不建议使用v-if/v-else-if/v-else
         -->
        <h1>条件渲染指令</h1>
        <div v-if="age>=30&&age<40">三十而立</div>
        <div v-else-if="age>=40&&age<50">四十不惑</div>
        <div v-else-if="age>=50&&age<60">五十知天命</div>
        <div v-else>未知阶段</div>
        <hr>
        <!-- 
            v-show符合条件直接显示，如果不符合条件不会直接DOM中删除，只是设置样式display，通过display样式的控制
            来显示或者隐藏DOM元素的
         -->
        <div v-show="age>=18&&(education=='本科'||education=='专科'||education=='研究生')">蜗牛学院欢迎您的加入</div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            age:8,
            education:'本科'
        }
    }
}
</script>

<style>

</style>